<template>
  <view class="success-container">
    <view class="success-content">
      <!-- 支付成功图标 -->
      <view class="success-icon">
        <wd-icon name="success" size="120rpx" color="#07c160" />
      </view>
      
      <!-- 支付信息 -->
      <view class="success-info">
        <view class="success-title">支付成功</view>
        <view class="success-amount">¥{{ formatPrice(amount) }}</view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <view class="info-item">
          <text>订单编号</text>
          <text>{{ orderNo }}</text>
        </view>
        <view class="info-item">
          <text>支付方式</text>
          <text>微信支付</text>
        </view>
      </view>

      <!-- 按钮组 -->
      <view class="button-group">
        <wd-button 
          type="primary" 
          block 
          @click="viewOrder"
          custom-style="margin-bottom: 20rpx; background: #07c160; border-color: #07c160;"
        >
          查看订单
        </wd-button>
        <wd-button 
          block 
          @click="backToHome"
          custom-style="background: #f8f8f8; border-color: #f8f8f8; color: #333;"
        >
          返回首页
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { formatPrice } from '@/utils/format'

const orderId = ref(0)
const orderNo = ref('')
const amount = ref(0)

onLoad((options) => {
  orderId.value = options.orderId
  orderNo.value = options.orderNo
  amount.value = options.amount
})

const viewOrder = () => {
  uni.redirectTo({
    url: `/pages/order/detail?orderId=${orderId.value}`
  })
}

const backToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
</script>

<style lang="scss">
.success-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
}

.success-content {
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx 40rpx;
  margin-top: 60rpx;
}

.success-icon {
  text-align: center;
  margin-bottom: 40rpx;
}

.success-info {
  text-align: center;
  margin-bottom: 60rpx;

  .success-title {
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .success-amount {
    font-size: 48rpx;
    color: #07c160;
    font-weight: bold;
  }
}

.order-info {
  border-top: 2rpx solid #f5f5f5;
  padding-top: 40rpx;
  margin-bottom: 60rpx;

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    font-size: 28rpx;

    text:first-child {
      color: #666;
    }

    text:last-child {
      color: #333;
    }
  }
}

.button-group {
  padding: 0 20rpx;
}
</style> 